<template>
  <div>
    商品内容详情页
    <img
      :src="
        itemObj.sku_img_url !== ''
          ? itemObj.sku_img_url
          : require('../assets/default.png')
      "
      class="itemimg"
    />
    {{ itemObj.sku_name }}
    价格：{{ price / 100 }}
    <div class="cartbtn" @click="addShop">添加到购物车</div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "item",
  data() {
    return {
      itemObj: {},
      price: 0,
      item_id: 0,
    };
  },
  mounted() {
    console.log("接收从列表传过来的参数", this.$route.params);
    var { id, price } = this.$route.params;
    this.price = price;
    this.item_id = id;

    axios.get("./json/item_" + id + ".json").then((res) => {
      console.log(res.data.data.reviews[0]);
      this.itemObj = res.data.data.reviews[0];
    });
  },
  methods: {
    addShop() {
      //加到购物车中的属性
      //id , name , price , num , imgsrc
      var item = {
        item_id: this.item_id,
        price: this.price,
        item_name: this.itemObj.sku_name,
        num: 1,
        imgsrc:
          this.itemObj.sku_img_url == ""
            ? require("../assets/default.png")
            : this.itemObj.sku_img_url,
      };
      //调用 vuex 中的mutation
      //   this.$store.commit("ADD_CART", item);
      //调用一下 action
      this.$store.dispatch("ADD_CART_AC", item);
    },
  },
};
</script>

<style scoped>
.itemimg {
  width: 100%;
}
.cartbtn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  width: 100%;
  background: orangered;
  color: #fff;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
}
</style>
